<template>
	
	<!-- <view class="status_bar">
	           
	</view> -->
	<!-- <view class="box-bg">
		<uni-nav-bar  shadow left-icon="left" leftText="返回" rightText="发布分享" title="分享列表" @clickLeft="topLeftClick()" @clickRight="topRightClick()" />
	</view> -->
				<view v-for="(item, index) in shareList">
					
				
					<uni-card  @click="onClick" >
						<!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
						<!-- <text class="uni-body">{{item.context}}</text> -->
						<rich-text :nodes="item.context" selectable="true"></rich-text>
						<view slot="actions" class="card-actions">
							<view class="card-actions-item" @click="editClick(item)">
								<uni-icons type="compose" size="18" color="#999"></uni-icons>
								<text class="card-actions-item-text">恢复</text>
							</view>
							
							<view class="card-actions-item" @click="deleteClick(item.id)">
								<uni-icons type="trash" size="18" color="#999"></uni-icons>
								<text class="card-actions-item-text">彻底删除</text>
							</view>
						</view>
					</uni-card>
				</view>
				
			
			
</template>

<script>
	import store from '@/store/index.js';//需要引入store
	export default {
		
		computed:{
			
			
			shareList(){
				return store.state.share.shareList
			},
			toolsContent(){
				return store.state.common.toolsContent
			},
		},
			components: {},
			data() {
				return {
					pageNum:1,
					status: 'more',
						statusTypes: [{
							value: 'more',
							text: '加载前',
							checked: true
						}, {
							value: 'loading',
							text: '加载中',
							checked: false
						}, {
							value: 'noMore',
							text: '没有更多',
							checked: false
						}],
						contentText: {
							contentdown: '没有更多数据',
							contentrefresh: '加载中',
							contentnomore: '没有更多'
						},
					
					extraIcon:{
						color: '#4cd964',
						size: '22',
						type: 'gear-filled'
					},
					title: 'uni-fab',
					directionStr: '垂直',
					horizontal: 'right',
					vertical: 'bottom',
					direction: 'horizontal',
					pattern: {
						color: '#7A7E83',
						backgroundColor: '#fff',
						selectedColor: '#007AFF',
						buttonColor: '#007AFF',
						iconColor: '#fff'
					},
					is_color_type: false,
					
				}
			},
			onLoad() {
				//加载新闻通知数据
				this.$data.pageNum=1;
				store.dispatch('loadShareData',{"flag":1,"pageNum":this.$data.pageNum,"pageSize":10})
				// uni.startPullDownRefresh();
			},
			// onPullDownRefresh() {
			// 		console.log('onPullDownRefresh');
					
			// },
			onReachBottom(){
				//页面接触到底部的触发方法
				this.$data.pageNum++
				store.dispatch('loadShareData',{"flag":0,"pageNum":this.$data.pageNum,"pageSize":10})
				
			},
			methods: {
				
				formatRichText(html) {
					console.log(html);
				  let newContent = html.replace(/<img(^>)*>/gi, function(match, capture) {
				    match = match.replace(/style="(^")+"/gi, '').replace(/style='(^')+'/gi, '');
				    match = match.replace(/width="(^")+"/gi, '').replace(/width='(^')+'/gi, '');
				    match = match.replace(/height="(^")+"/gi, '').replace(/height='(^')+'/gi, '');
				    return match;
				  });
				
				  newContent = newContent.replace(/style="(^")+"/gi, function(match, capture) {
				    match = match.replace(/width:(^;)+;/gi,'max-width:100%;').replace(/width:(^;)+;/gi,'max-width:100%;');
				    return match;
				  });
				
				  newContent = newContent.replace(/<br(^>)*\/>/gi, ''); 
				  newContent = newContent.replace(/<img/gi,'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				
				  return newContent;
				},
				trigger(e) {
					this.toolsContent[e.index].active = !e.item.active
					store.dispatch('toolsJump',e.item.value)
				},
				onClick(e){
					console.log(e)
				},
				editClick(item){
					
					uni.navigateTo({
						url:"/pages/share/createShare?id="+item.id
					})
					
				},
				topClick(item){
					var self=this;
					var content="";
					var topFlag=0;
					if(item.topFlag==1){
						content="您确定要取消置顶当前内容吗";
					}else{
						content="您确定要置顶当前内容吗";
						topFlag=1;
					}
					uni.showModal({
						title: '提示',
						content: content,
						success: function(res) {
							if (res.confirm) {
								self.$data.pageNum=1;
								store.dispatch('topShareData',{"id":item.id,"topFlag":topFlag}).then(() => {
								
								
									uni.showToast({
										title:"置顶成功",
										icon:'none'
									})
								})
							} else if (res.cancel) {
								// console.log('用户点击取消')
							}
						}
					})
				},
				deleteClick(id){
					var self=this;
					uni.showModal({
						title: '提示',
						content: '您确定要删除当前内容吗',
						success: function(res) {
							if (res.confirm) {
								self.$data.pageNum=1;
								store.dispatch('deleteShareData',id).then(() => {
									console.log(id)
									
									uni.showToast({
										title:"删除成功",
										icon:'none'
									})
								})
							} else if (res.cancel) {
								// console.log('用户点击取消')
							}
						}
					})
					
					
				},
			
				onChange(e) {
				
					this.status = e.detail.value
				},
				clickLoadMore(e) {
					
					uni.showToast({
						icon: 'none',
						title: "当前状态：" + e.detail.status
					})
				},
				
				topRightClick(){
					uni.redirectTo({
						url:"/pages/share/createShare"
					})
				},
			}
		}
</script>

<style>
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
.container {
		overflow: hidden;
	}

	.custom-cover {
		flex: 1;
		flex-direction: row;
		position: relative;
	}

	.cover-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		font-size: 14px;
		color: #fff;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}

	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}

	.cover-image {
		flex: 1;
		height: 150px;
	}

	.no-border {
		border-width: 0;
	}
</style>